import React from 'react';
import {inject, observer} from 'mobx-react';
import {Route, withRouter} from 'react-router-dom';
import {Icon, List, Popover, Tools} from 'weaver-mobile';
import {ListViewPage,RouteLayout} from 'weaver-mobile-page';
import Condition from "./condition";
import {openHrmCard,getWeekOfYear} from "../../../util";
import {WrListCard, WrListCardOperate, WrMenu, WrPicker} from "../../../public";
import {menuData} from '../coms'
const Item = Popover.Item;
const getLabel = Tools.getLabel

/**
 * 报告查询
 */
@inject('planResultStore')
@withRouter
@observer
export default class Index extends React.Component {

    constructor(props) {
        super(props);
        this.store = this.props.planResultStore;
    }

    componentDidMount() {
        
        this.store.doInit();
    }

    render() {
        const {list, getTableDatas} = this.store;
        return (
            <div className="workrelate-plan-result">
                {this.buildHeader()}
                <ListViewPage.Normal
                    store={list}
                    heightSpace={49}
                    getTemplate={this.getTemplate}
                    renderSeparator={(section, index) => <WrListCardOperate showOperate={false}
                                                                          showSpace={index != list.data.length - 1}/>}
                    onRowClick={this.onRowClick}
                />
                <WrMenu
                    data={this.props.menuData}
                    _width={'60px'}
                    onSelect={val => {this.props.history.push(val.props.path);this.store.resetCondition()}}
                    // buttonData={this.buildOperateButton()}
                />
            </div>
        )
    }

    //详情点击
    onRowClick=(rowData)=>{
        const {queryParams} = this.store
        if(!rowData)return 
        if(rowData.planid !=''){
            this.props.history.push({
                pathname:'/planHome/planView/index',
                search:'planid='+rowData.planid
            })
        }else{
            this.props.history.push({
                pathname:`/planHome/planView/index`,
                search:`resourceid=${rowData.id}&type1=${queryParams.dateType}&type2=${queryParams.dateValue}&year=${queryParams.year}`
            })
        }
    }

    //获取表头
    buildHeader = () => {   
        const {queryParams, planTypeData, type, getTableDatas, onSearchChange, weekText ,totalWeek,} = this.store;
        return (
            <div className="result-header">
                <Popover
                    placement="bottomLeft"
                    onSelect={this.onSelect}
                    visible={false}
                    mask={true}
                    overlay={                        
                        <div className="workrelate-header-item">
                        {planTypeData.map(item => <Popover.Item key={item.key}><span
                            className="workrelate-header-item-cycle">{item.title}</span></Popover.Item>)}
                        </div>
                    }
                >
                    <span className="result-header-type">
                        <span>{queryParams.dateType==1?getLabel(20617,'月报'):getLabel(20619,'周报')}</span>
                        <Icon size="xs" type="down"/>
                    </span>
                </Popover>
                <WrPicker
                    type={queryParams.dateType==1?1:5}
                    initval={[parseInt(queryParams.year), parseInt(queryParams.dateValue)]}
                    onChange={val => {
                        onSearchChange({year: val[0], dateValue: val[1]});
                        delete this.store.queryParams['planid']
                        this.store.queryParams.planid = ''
                        getTableDatas();
                        this.store.getWeek({ year: val[0], currentValue: val[1] })
                    }}
                    totalWeek={totalWeek}
                    weekText={weekText}
                    minyear={new Date().getFullYear()-5}
                    maxyear={new Date().getFullYear()+1}
                />
                <Icon key='filter-o' type='filter-o' onClick={() => {
                    this.props.history.push('/planHome/planResult/condition')
                }}/>
                <Route
                    key="planResult-condition"
                    path="/planHome/planResult/condition"
                    // breadcrumbName="报告查询-高级搜索条件"
                    render={() => ( <RouteLayout><Condition/></RouteLayout>)}
                />
  
            </div>
            
        )
    }

    //类型选中
    onSelect = (val) => {
        const {onSearchChange, getTableDatas,queryParams} = this.store;
        this.store.getWeek({ year: queryParams.year,currentValue:getWeekOfYear()})
        if(val.key==2){
            onSearchChange({year : new Date().getFullYear()})
            onSearchChange({dateValue: getWeekOfYear()})
       
        }else{
            onSearchChange({dateValue:new Date().getMonth()})
        }
        onSearchChange({dateType: val.key})
        getTableDatas();
    }

    //获取数据模板
    getTemplate = (template) => {

        return {
            default: [{
                render: data => <WrListCard data={[
                    {label: getLabel('24986', '标题'), value: data.planname},
                    {
                        label: getLabel('30042', '人员'), value: (<a href="javaScript:void(0)" onClick={(e) => openHrmCard(data.id,e)}>   
                            {data.idspan}
                        </a>)
                    },
                    {label: getLabel(33553, '分部'), value: data.subcompanyid1span},
                    {label: getLabel(27511, '部门'), value: data.departmentidspan},
                    {label: getLabel(23247, '状态'), value: this.getStatus(data.s_status,data.s_statusspan)},
                ]}/>
            }]
        }
    }

    //获取方案状态
    getStatus = (val,statusspan) => {
        val=val?val:'-1'
        if(statusspan && statusspan.indexOf("overtime")>-1){
            val = '6'
        }
        const color = {
            '0': '#EB9B53',//草稿
            '1': '#5388EB',//审核
            '2': '#B916E8',//退回
            '3': '#49D732',//已完成
            '6': '#5F0E03 ',//过期
            '-1': '#5388EB ',//其他
        }
        const {statusValue} = this.store;
        return <span className="workrelate-status" style={{background: color[val]}}>{statusValue[val]}</span>
    }

}

